//加载公共样式
require('../../assets/css/index.less')

//加载自己的样式
require('./play.less')

//引入字体图标
require('../../assets/fonts/iconfont.css')

const request = require('../../utils/request')

window.onload = () => {
  //服务器地址
  const API = 'http://fitness.h5.itsource.cn:3701'

  //获取dom
  const player = document.querySelector('#player')
  const curIndex = document.querySelector('#curIndex')
  const totalLength = document.querySelector('#totalLength')
  const title = document.querySelector('#title')
  const pre = document.querySelector('#pre')
  const pause = document.querySelector('#pause')
  const next = document.querySelector('#next')
  const play1 = document.querySelector('#play1')
  const progress = document.querySelector('#progress')
  const end = document.querySelector('#end')
  const continue1 = document.querySelector('#continue')
  const popup = document.querySelector('.popup')

  //获取本地数据
  const fragments = JSON.parse(localStorage.getItem('fragments'))

  //设置变量
  let index = 0 //初始化播放的索引
  let length = fragments.length //视频总个数
  let timeList = [] //用于保存所有运动的时间
  let time = 0 //记录当前时间

  //播放函数
  function play() {
    //给视频src赋值
    player.src = API + fragments[index].videoUrl
    //信息赋值
    curIndex.textContent = index + 1
    totalLength.textContent = length
    title.textContent = fragments[index].title
    //监听播放器能播放时候 再播放
    player.addEventListener('canplay', () => {
      //播放
      player.play()
    })
  }

  //初始化播放
  play()

  //下一曲
  next.addEventListener('click', () => {
    //能够播放下一条
    if (index < length - 1) {
      //索引+1
      index++
      //播放器播放下一个视频
      play()

      //把上次记录的时间 存进数组
      timeList.push(time)
      console.log('timeList :>> ', timeList)
    } else {
      //到底了
      //index = 0
      //play()
    }
  })

  //上一曲
  pre.addEventListener('click', () => {
    if (index > 0) {
      //索引-1
      index--
      //播放器播放下一个视频
      play()

      //把上次记录的时间 存进数组
      timeList.push(time)
      console.log('timeList :>> ', timeList)
    } else {
      //   index = 0
      //   play()
    }
  })

  //暂停
  pause.addEventListener('click', () => {
    //显示播放按钮 隐藏暂停按钮
    play1.style.display = 'block'
    pause.style.display = 'none'

    //弹窗弹出
    popup.style.display = 'block'
    //暂停
    player.pause()
  })

  //播放
  play1.addEventListener('click', () => {
    //显示暂停按钮 隐藏播放按钮
    play1.style.display = 'none'
    pause.style.display = 'block'
    //播放
    player.play()
  })

  //添加一个 timeupdate事件
  player.addEventListener('timeupdate', () => {
    //获取当前时间 百分比
    const percent = player.currentTime / player.duration
    //计算进度条的长度
    progress.style.width = percent * 100 + '%'
    // console.log(player.currentTime)
    //把当前时间记录在time里面
    time = player.currentTime
  })

  //监听播放结束
  player.addEventListener('ended', () => {
    //执行下一曲
    next.click()
  })

  //点击继续
  continue1.addEventListener('click', () => {
    //弹窗隐藏
    popup.style.display = 'none'
    //继续播放
    play1.click()
  })

  //结束训练
  end.addEventListener('click', () => {
    //把运动数据发送请求 保存到数据库
    timeList.push(player.currentTime)
    //1 循环求和
    // let total = 0 //创建一个变量
    // //循环求和
    // timeList.forEach(v => {
    //   total += v
    // })

    //计算总时长
    let res = timeList.reduce((total, cur) => {
      return total + cur
    }, 0)

    //发送请求
    request
      .post('/api/exercise/save', {
        type: 2,
        duration: res,
        calorie: res * 1000,
      })
      .then(res => {
        if (res.data.errno === 0) {
          //跳转到课程页面
          location.href = './course.html'
        }
      })
  })
}
